<template>
  <div class="main">
    <el-row>
      <el-card style="height: 330px">
        <el-col :span="20">
          <div style="width: 100%">
            <div style="height: 50px; width: 60px; margin: 0px 0px">
              <el-date-picker
                v-model="dateValue"
                format="yyyy年MM月"
                value-format="yyyy-MM"
                type="month"
                placeholder="选择月"
                size="small"
                style="width: 150px"
              >
              </el-date-picker>
            </div>
            <div id="tongji" style="height: 290px; width: 100%">
              <!-- <el-card  style="height: 100%"></el-card> -->
            </div>
          </div>
        </el-col>
        <el-col :span="4">
          <div style="height: 220px; margin: 70px 0px 20px 0px">
            <table class="table" style="height: 100%; width: 100%">
              <tr>
                <td class="td" style="border-right: #cccccc solid 1px">
                  <span class="spanHighLight">昨日累计用电量</span><br />
                  <span class="spanGray">{{ zrljyd }} kWh</span>
                </td>
                <td class="td">
                  <span class="spanHighLight">本月累计用电量</span><br />
                  <span class="spanGray">{{ byljydl }} kWh</span>
                </td>
              </tr>
              <tr>
                <td
                  class="td"
                  style="
                    border-right: #cccccc solid 1px;
                    border-top: #cccccc solid 1px;
                  "
                >
                  <span class="spanHighLight">昨日累计燃耗量</span><br />
                  <span class="spanGray">{{ zrljrhl }} GJ</span>
                </td>
                <td class="td" style="border-top: #cccccc solid 1px">
                  <span class="spanHighLight">本月累计燃耗量</span><br />
                  <span class="spanGray">{{ byljrhl }} GJ</span>
                </td>
              </tr>
            </table>
          </div>
        </el-col>
      </el-card>
    </el-row>

    <el-row>
      <div
        style="border-style: solid none none none; border-top-color: #ADF28B"
      >
        <el-col :span="7">
          <el-card id="nscqk" style="height: 300px"></el-card>
        </el-col>
        <el-col :span="7">
          <el-card id="bzcl" style="height: 300px"> </el-card>
        </el-col>
        <el-col :span="10">
          <el-card id="ybzhn" style="height: 300px"> </el-card>
        </el-col>
      </div>
    </el-row>
    <el-row>
      <el-card style="height: 220px">
        <div style="margin: 0px 0px 0px 0px; float: left">
          <span style="color: #606266; font-size: 20px; font-weight: bold"
            >能耗历史查询</span
          >
          <el-date-picker
            style="margin: 0px 0px 0px 15px"
            v-model="dateList"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"           
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
          <el-button
            style="margin: 0px 0px 0px 15px"
            type="primary"          
            >查询</el-button
          >
        </div>
        <div
          style="float: left; width: 100%; text-align: left; margin-top: 20px"
        >
          <el-form
            :model="formInline"
            :label-position="labelPosition"
            label-width="100px"
          >
            <el-col :span="6">
              <el-form-item label="生产厂">
                <span class="maohao">:</span>
                <el-input
                  style="width: 120px"
                  v-model="formInline.user"
                  placeholder="生产厂"
                  :readonly="true"
                ></el-input>
              </el-form-item>
              <el-form-item label="累计用电量">
                <span class="maohao">:</span>
                <el-input
                  style="width: 120px; margin-top: 0px"
                  v-model="formInline.user"
                  placeholder="累计用电量"
                  :readonly="true"
                ></el-input>
              </el-form-item>              
            </el-col>
            <el-col :span="6">
              <el-form-item label="压缩空气总量">
                <span class="maohao">:</span>
                <el-input
                  style="width: 120px"
                  v-model="formInline.user"
                  placeholder="压缩空气总量"
                  :readonly="true"
                ></el-input>
              </el-form-item>
              <el-form-item label="氧气总量">
                <span class="maohao">:</span>
                <el-input
                  style="width: 120px; margin-top: 0px"
                  v-model="formInline.user"
                  placeholder="氧气总量"
                  :readonly="true"
                ></el-input>
              </el-form-item>              
            </el-col>
            <el-col :span="6">
              <el-form-item label="待定">
                <span class="maohao">:</span>
                <el-input
                  style="width: 120px"
                  v-model="formInline.user"
                  placeholder="待定"
                  :readonly="true"
                ></el-input>
              </el-form-item>
              <el-form-item label="待定">
                <span class="maohao">:</span>
                <el-input
                  style="width: 120px; margin-top: 0px"
                  v-model="formInline.user"
                  placeholder="待定"
                  :readonly="true"
                ></el-input>
              </el-form-item>             
            </el-col>
            <el-col :span="6">
              <el-form-item label="待定">
                <span class="maohao">:</span>
                <el-input
                  style="width: 120px"
                  v-model="formInline.user"
                  placeholder="待定"
                  :readonly="true"
                ></el-input>
              </el-form-item>
              <el-form-item label="待定">
                <span class="maohao">:</span>
                <el-input
                  style="width: 120px; margin-top: 0px"
                  v-model="formInline.user"
                  placeholder="待定"
                  :readonly="true"
                ></el-input>
              </el-form-item>              
            </el-col>
          </el-form>
        </div>
      </el-card>
    </el-row>
  </div>
</template>

<script>
import { formatDate } from "../../utils/date";
// 引入基本模板
// import echarts from "echarts";
// let echarts = require("echarts/lib/echarts");
let echarts = require('echarts')
// 引入柱状图组件
// require("echarts/lib/chart/bar");
export default {
  data() {
    return {
      labelPosition: "right",
      dateValue: null,
      //昨日累计用电
      zrljyd: 0,
      //本月累计用电量
      byljydl: 0,
      //昨日累计燃耗量
      zrljrhl: 0,
      //本月累计燃耗量
      byljrhl: 0,
      bzclList: [
        { value: 335, name: "甲" },
        { value: 310, name: "乙" },
        { value: 234, name: "丙" },
        { value: 135, name: "丁" },
      ],
      ybzhnList: [],
      //时间选择
      dateList: [],
      formInline: {
        user: "",
        region: "",
      },
    };
  },
  created() {
    this.getDate();
    this.getDateList();
    // this.getData();
  },
  mounted() {
    this.tongjiEcharts();
    this.nscqkEcharts();
    this.bzclEcharts();
    this.ybzhnEcharts();
    window.addEventListener("resize", this.resizefun);
  },
  //移除事件监听，避免内存泄漏
  beforeDestroy() {
    window.removeEventListener("resize", this.resizefun);
    this.resizefun = null;
  },
  methods: {
    getDateList() {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 1);
      this.dateList = [
        formatDate(start, "yyyy-MM-dd"),
        formatDate(end, "yyyy-MM-dd"),
      ];
    },
    resizefun() {
      //这里的myChart就是要自适应的图表容器Id
      echarts.init(document.getElementById("tongji")).resize();
      echarts.init(document.getElementById("nscqk")).resize();
      echarts.init(document.getElementById("bzcl")).resize();
    },
    getDate() {
      var date = new Date();
      var year = date.getFullYear();
      var month = date.getMonth();
      var toMonth = year + "-" + (month + 1);
      this.dateValue = toMonth;
    },
    tongjiEcharts() {
      var myChart = echarts.init(document.getElementById("tongji"));
      var colors = ["#22c3aa", "#59c4e6", "#c12e34"];

      var option = {
        title: {
          text: "月每天能源总耗情况",
        },
        color: colors,

        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
          },
        },
        grid: {
          left: "3%",
          right: "10%",
        },
        legend: {
          data: ["燃气消耗", "耗电量", "产量"],
        },
        xAxis: [
          {
            type: "category",
            axisTick: {
              alignWithLabel: true,
            },
            axisLabel: {
              interval: 0,
              rotate: 40,
            },
            data: [
              "1",
              "2",
              "3",
              "4",
              "5",
              "6",
              "7",
              "8",
              "9",
              "10",
              "11",
              "12",
              "13",
              "14",
              "15",
              "16",
              "17",
              "18",
              "19",
              "20",
              "21",
              "22",
              "23",
              "24",
            ],
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "燃气消耗",
            position: "right",
            axisLine: {
              lineStyle: {
                color: colors[0],
              },
            },
            axisLabel: {
              formatter: "{value} 万m³",
            },
            splitLine: {
              show: false,
            },
          },
          {
            type: "value",
            name: "耗电量",
            position: "right",
            offset: 60,
            axisLine: {
              lineStyle: {
                color: colors[1],
              },
            },
            axisLabel: {
              formatter: "{value} 万kWh",
            },
            splitLine: {
              show: false,
            },
          },
          {
            type: "value",
            name: "产量",
            position: "left",
            axisLine: {
              lineStyle: {
                color: colors[2],
              },
            },
            axisLabel: {
              formatter: "{value} t",
            },
          },
        ],
        series: [
          {
            name: "燃气消耗",
            type: "bar",
            data: [
              2.0,
              4.9,
              7.0,
              23.2,
              25.6,
              76.7,
              135.6,
              162.2,
              32.6,
              20.0,
              6.4,
              3.3,
              2.0,
              4.9,
              7.0,
              23.2,
              25.6,
              76.7,
              135.6,
              162.2,
              32.6,
              20.0,
              6.4,
              3.3,
            ],
          },
          {
            name: "耗电量",
            type: "bar",
            yAxisIndex: 1,
            data: [
              2.6,
              5.9,
              9.0,
              26.4,
              28.7,
              70.7,
              175.6,
              182.2,
              48.7,
              18.8,
              6.0,
              2.3,
              2.6,
              5.9,
              9.0,
              26.4,
              28.7,
              70.7,
              175.6,
              182.2,
              48.7,
              18.8,
              6.0,
              2.3,
            ],
          },
          {
            name: "产量",
            type: "line",
            yAxisIndex: 2,
            data: [
              2.0,
              2.2,
              3.3,
              4.5,
              6.3,
              10.2,
              20.3,
              23.4,
              23.0,
              16.5,
              12.0,
              6.2,
              2.0,
              2.2,
              3.3,
              4.5,
              6.3,
              10.2,
              20.3,
              23.4,
              23.0,
              16.5,
              12.0,
              6.2,
            ],
          },
        ],
      };

      myChart.setOption(option);
    },
    nscqkEcharts() {
      var nscqkChart = echarts.init(document.getElementById("nscqk"));
      var option = {
        title: {
          text: "年生产情况",
        },
        color: ["#5793f3", "#d14a61", "#675bba"],

        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
          },
        },
        grid: {
          left: "20%",
          right: "20%",
        },

        legend: {
          data: ["燃气单耗", "电单耗"],
        },
        xAxis: [
          {
            type: "category",

            data: ["甲", "乙", "丙", "丁"],
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "电单耗",
            min: 0,
            max: 50,
            axisLabel: {
              formatter: "{value} kWh/t",
            },
          },

          {
            type: "value",
            name: "燃气单耗",

            axisLabel: {
              formatter: "{value} GJ/t",
            },
          },
        ],
        series: [
          {
            name: "电单耗",
            type: "bar",
            data: [2.6, 5.9, 9.0, 26.4],
          },
          {
            name: "燃气单耗",
            type: "line",
            yAxisIndex: 1,
            data: [2.0, 2.2, 3.3, 4.5],
          },
        ],
      };
      nscqkChart.setOption(option);
    },
    bzclEcharts() {
      var bzclChart = echarts.init(document.getElementById("bzcl"));
      var bzclOption = {
        color: [
          "#22c3aa",
          "#3fb1e3",
          "#f58db2",
          "#b6a2de",
          "#b8d2c7",
          "#edafda",
          "#f3d999",
          "#96dee8",
        ],
        title: {
          text: "各班组生产量（吨）",
          left: "center",
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)",
        },
        legend: {
          orient: "vertical",
          left: 10,
        },
        series: [
          {
            name: "钢种",

            type: "pie",
            radius: ["20%", "50%"],
            avoidLabelOverlap: false,
            label: {
              show: true,
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "30",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: true,
            },
            data: this.bzclList,
          },
        ],
      };
      bzclChart.setOption(bzclOption);
    },
    ybzhnEcharts() {
      var ybzhnChart = echarts.init(document.getElementById("ybzhn"));
      var colors = ["#22c3aa", "#e87c25", "#c12e34"];
      var ybzhnOption = {
        title: {
          text: "月班组耗能对标",
        },
        color: colors,

        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
          },
        },
        grid: {
          left: "6%",
          right: "18%",
        },
        legend: {
          data: ["燃气消耗", "耗电量", "产量"],
        },
        xAxis: [
          {
            type: "category",
            axisTick: {
              alignWithLabel: true,
            },
            data: ["甲", "乙", "丙", "丁"],
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "燃气消耗",
            position: "right",
            axisLine: {
              lineStyle: {
                color: colors[0],
              },
            },
            axisLabel: {
              formatter: "{value} GJ",
            },
          },
          {
            type: "value",
            name: "耗电量",
            position: "right",
            offset: 60,
            axisLine: {
              lineStyle: {
                color: colors[1],
              },
            },
            axisLabel: {
              formatter: "{value} kWh",
            },
            splitLine: {
              show: false,
            },
          },
          {
            type: "value",
            name: "产量",
            position: "left",
            axisLine: {
              lineStyle: {
                color: colors[2],
              },
            },
            axisLabel: {
              formatter: "{value} t",
            },
          },
        ],
        series: [
          {
            name: "燃气消耗",
            type: "bar",
            data: [2.0, 4.9, 7.0, 23.2],
          },
          {
            name: "耗电量",
            type: "bar",
            yAxisIndex: 1,
            data: [2.6, 5.9, 9.0, 26.4],
          },
          {
            name: "产量",
            type: "line",
            yAxisIndex: 2,
            data: [2.0, 2.2, 3.3, 4.5],
          },
        ],
      };
      ybzhnChart.setOption(ybzhnOption);
    },
  },
};
</script>

<style>
.table {
  border-spacing: 0;
}
.spanHighLight {
  color: #6be6c1;
  font-weight: bold;
  font-size: 18px;
}
.spanGray {
  color: #b2b4b8;
  font-size: 18px;
  font-weight: bold;
}
.maohao {
  font-size: 20px;
  font-weight: bold;
  margin-right:10px;
  color:#909399;
}
/* .main{
  height: 100%;
} */

</style>